<template>
	<view class="page-container">
		<!-- 页面标题栏 -->
		<view class="title-bar">
			<view class="">	<text class="title-text">申请用仓</text></view>
		     <view class=""><button class="primary-btn" @click="handleAdd">
				<text class="btn-text">留言申请</text>
			</button></view>
			
		</view>
      
		<!-- 主内容区 -->
		<view class="content-container">
			<!-- 筛选区域 -->
			<view class="filter-container">
				<view class="filter-item">
					<view class="input-wrapper">
						<text class="iconfont icon-search"></text>
						<input type="text" placeholder="搜索仓库名称/编码" class="search-input" />
					</view>
				</view>
				<view class="filter-item">
					<view class="select-wrapper">
						<text class="select-text">全部状态</text>
						<text class="iconfont icon-arrow-down"></text>
					</view>
				</view>
				<view class="filter-item">
					<button class="filter-btn" @click="handleFilter">
						<text class="iconfont icon-filter"></text>
						<text class="btn-text">筛选</text>
					</button>
				</view>
			</view>

			<!-- 仓库列表 -->
			<view class="list-container">
				<!-- 列表表头 -->
				<view class="list-header">
					<view class="header-item">仓库名称</view>
					<view class="header-item">联系人</view>
					<view class="header-item">联系电话</view>
					<view class="header-item">地址</view>
					<view class="header-item">状态</view>
					<view class="header-item edit">操作</view>
				</view>

				<!-- 列表内容 -->
				<view class="list-body">
					<!-- 列表项 -->
					<view class="list-item" v-for="(item, index) in wareHouseList" :key="index">
						<view class="list-cell">
							<text class="cell-sub">{{ item.code }}-</text>
							<text class="cell-main">{{ item.warehouse_name }}</text>
						</view>
						<view class="list-cell">{{ '暂无联系人' }}</view>
						<view class="list-cell">{{ item.telePhone }}</view>
						<view class="list-cell">{{ item.address }}</view>
						<view class="list-cell">
							<view class="status-tag" :class="item.status === 'active' ? 'status-active' : 'status-inactive'">
								{{ item.status === 'active' ? '可用' : '不可用' }}
							</view>
						</view>
						<view class="list-cell edit">
							<button class="action-btn select-btn" @click="selectWareHouse(item)">
								<text class="iconfont icon-check"></text>
								<text class="btn-text">选择</text>
							</button>
							<button class="action-btn detail-btn">
								<text class="iconfont icon-detail"></text>
								<text class="btn-text">详情</text>
							</button>
						</view>
					</view>

					<!-- 空状态 -->
					<view class="empty-state" v-if="wareHouseList.length === 0">
						<text class="iconfont icon-warehouse"></text>
						<text class="empty-text">暂无仓库数据</text>
						<button class="primary-btn" @click="handleAdd">
							<text class="iconfont icon-add"></text>
							<text class="btn-text">添加仓库</text>
						</button>
					</view>
				</view>

				<!-- 分页控件 -->
				<view class="pagination" v-if="wareHouseList.length > 0">
					<view class="page-info">
						<text>显示 1-10 条，共 25 条</text>
					</view>
					<view class="page-control">
						<button class="page-btn" disabled>
							<text class="iconfont icon-arrow-left"></text>
						</button>
						<button class="page-btn active">1</button>
						<button class="page-btn">2</button>
						<button class="page-btn">3</button>
						<button class="page-btn">
							<text class="iconfont icon-arrow-right"></text>
						</button>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="sendMsg" type="center">
		
				<sendMsg @close='closePopup'></sendMsg>	 
		</uni-popup>
	</view>
</template>

<script>
const CloudDb = uniCloud.importObject('getDb');
import sendMsg from '../sendMsg.vue';
const db = uniCloud.database();
import { store } from '../../uni_modules/uni-id-pages/common/store';
export default {
	name: 'applyForNewWareHouse',
	components:{
		sendMsg
	},
	data() {
		return {
			wareHouseList: [], // 仓库列表数据
			supplier: {}
		};
	},
	async mounted() {
		await this.getWareHouse();
		await this.getSupplierShip(); //获取我是哪个供应商
	},
	methods: {
		// 获取仓库列表
		async getWareHouse() {
			try {
				const res = await CloudDb.getDB('warehouse', {});
				if (res.code) {
					this.wareHouseList = res.data;
				}
			} catch (e) {
				console.error('获取仓库列表失败：', e);
			}
		},
		async getSupplierShip() {
			console.log(JSON.stringify(store.userInfo._id));
			try {
				const iam = await CloudDb.getOwnership(store.userInfo._id,"ums" );
				if (iam.code) {
					this.supplier = iam.data[0];
				}
			} catch (e) {
				console.error(e);
			}
		},
		// 选择仓库
		async selectWareHouse(item) {
			uni.showModal({
				title: '申请用仓',
				content: `您确定要申请的仓库是${item.code}-${item.warehouse_name}`,
				success: async (res) => {
					if (res.confirm) {
						try {
							const res = await CloudDb.applyForNewWareHouse(this.supplier.code, item.code,item.warehouse_name);
							console.log(res);
							if(res.code){
								uni.showModal({
									title:'仓库申请提交成功',
									
									content:`仓库${item.code}-${item.warehouse_name}提交成功，等待仓库审核，如2小时内无答复，请直接联系仓库`
								})
							}else{
							   uni.showModal({
							   	title:'您无法申请',
								content:`原因:${res.errMsg},如有问题请直接联系仓库！`
							   })
							}
						} catch (e) {
							console.error(e);
						}
					}
				}
			});
		},
		// 新建申请
		handleAdd() {
			console.log('新建申请');
			this.$refs.sendMsg.open()
			// 实际项目中可添加新建逻辑
		},
		closePopup(){
			this.$refs.sendMsg.close()
		},
		// 筛选
		handleFilter() {
			console.log('筛选');
			// 实际项目中可添加筛选逻辑
		}
	}
};
</script>

<style>
/* 基础样式 */
.page-container {
	min-height: 100vh;
	background-color: #f5f5f5;
	font-size: 14px;
	color: #333333;
}

/* 标题栏样式 */
.title-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 14px 16px;
	background-color: #ffffff;
	border-bottom: 1px solid #e5e5e5;
}

.title-text {
	font-size: 18px;
	font-weight: 600;
	color: #1a1a1a;
}

/* 按钮样式 */
.primary-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 16px;
	background-color: #0066cc;
	color: #ffffff;
	border: none;
	border-radius: 4px;
	font-size: 14px;
	line-height: 1;
}

.filter-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 16px;
	background-color: #ffffff;
	color: #333333;
	border: 1px solid #dddddd;
	border-radius: 4px;
	font-size: 14px;
	width: 100%;
}

.action-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4px 8px;
	background-color: transparent;
	border: none;
	font-size: 12px;
	margin-right: 8px;
}

.select-btn {
	color: #0066cc;
}

.detail-btn {
	color: #666666;
}

.btn-text {
	margin-left: 4px;
}

/* 内容容器 */
.content-container {
	padding: 16px;
}

/* 筛选区域 */
.filter-container {
	display: flex;
	gap: 12px;
	margin-bottom: 16px;
}

.filter-item {
	flex: 1;
}

.input-wrapper {
	display: flex;
	align-items: center;
	padding: 8px 12px;
	background-color: #ffffff;
	border: 1px solid #dddddd;
	border-radius: 4px;
}

.search-input {
	flex: 1;
	padding: 0;
	margin-left: 8px;
	border: none;
	outline: none;
	font-size: 14px;
}

.select-wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 12px;
	background-color: #ffffff;
	border: 1px solid #dddddd;
	border-radius: 4px;
}

/* 列表样式 */
.list-container {
	background-color: #ffffff;
	border-radius: 4px;
	overflow: hidden;
}

.list-header {
	display: flex;
	background-color: #f0f2f5;
	border-bottom: 1px solid #e5e5e5;
}

.header-item {
	flex: 1;
	padding: 12px;
	font-size: 13px;
	color: #666666;
	text-align: center;
}

.list-body {
	border-bottom: 1px solid #e5e5e5;
}

.list-item {
	display: flex;
	border-bottom: 1px solid #f0f0f0;
}

.list-item:last-child {
	border-bottom: none;
}

.list-cell {
	flex: 1;
	padding: 12px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	word-break: break-all;
}

.cell-main {
	display: block;
	font-weight: 500;
	margin-bottom: 4px;
}

.cell-sub {
	display: block;
	font-size: 12px;
	color: #666666;
}

/* 状态标签 */
.status-tag {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 12px;
	font-size: 12px;
}

.status-active {
	background-color: #e6f4ea;
	color: #008000;
}

.status-inactive {
	background-color: #f5f5f5;
	color: #666666;
}

/* 空状态 */
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60px 20px;
	color: #666666;
}

.empty-state .icon-warehouse {
	font-size: 64px;
	margin-bottom: 16px;
	color: #cccccc;
}

.empty-text {
	margin-bottom: 20px;
	font-size: 16px;
}

/* 分页样式 */
.pagination {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 16px;
	border-top: 1px solid #e5e5e5;
}

.page-info {
	font-size: 13px;
	color: #666666;
}

.page-control {
	display: flex;
	gap: 8px;
}

.page-btn {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #ffffff;
	border: 1px solid #dddddd;
	border-radius: 4px;
	font-size: 13px;
}

.page-btn.active {
	background-color: #0066cc;
	color: #ffffff;
	border-color: #0066cc;
}

.page-btn:disabled {
	color: #cccccc;
	border-color: #eeeeee;
}

/* 响应式调整 */
@media (max-width: 768px) {
	.filter-container {
		flex-direction: column;
	}

	.list-header {
		display: none;
	}

	.list-item {
		flex-direction: column;
		align-items: flex-start;
		padding: 12px;
		border-bottom: 1px solid #f0f0f0;
	}

	.list-cell {
		width: 100%;
		justify-content: flex-start;
		padding: 6px 0;
	}

	.list-cell:before {
		content: attr(data-label);
		display: inline-block;
		width: 80px;
		color: #666666;
		margin-right: 8px;
	}
}
</style>
